<template>
  <div class="index">
    <!--head-->
    <div class="role-head">
      <p class="role-head-title"><i class="icon iconfont icon-yonghu"></i>用户管理</p>
      <div class="role-head-operation">
        <span class="role-head-operation-items" v-if="usersRead" @click="selectShow"><i class="icon iconfont icon-chaxun"></i><span style="display:block;float:left">查询</span></span>
        <span class="role-head-operation-items" v-if="usersAdd" @click="toAdd"><i class="icon iconfont icon-xinzeng"></i><span style="display:block;float:left">新增</span></span>
        <span class="role-head-operation-items"><a style="color:#fff;" href="javascript:history.go(-1)"><span style="display:block;float:left;font-size:16px;">返回</span><i class="icon iconfont icon-jinru"></i></a></span>
      </div>
    </div>
    <!--head end-->
    <!--select-->
    <div class="role-select on">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form ref="form" label-position="left" label-width="80px" class="aaa">
            <el-form-item label="登陆名" class="rolelabel">
              <el-input ref="loginName" class="role-select-ipt" v-model.trim="selectform.loginName"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form ref="form" label-position="left" label-width="80px">
            <el-form-item label="用户名" class="rolelabel">
              <el-input ref="userName" class="role-select-ipt" v-model.trim="selectform.userName"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" :offset="16">
            <el-button @click="selectHide" class="colse">关    闭</el-button>
            <el-button @click="getUsers" class="select-submit">查    询</el-button>
        </el-col>
      </el-row>      
    </div>
    <!--select end-->
    <!--table-->
    <div class="role-table">
      <table id="role-table">
          <tbody class="role-table-title">
            <td>登录名</td>
            <td>用户名</td>
            <td>用户类别</td>
            <td>角色</td>
            <td>手机号</td>
            <td style="text-indent:18px;">操作</td>
          </tbody>
          <tr v-if="empty">
            <td class="empty" colspan="6">暂无数据</td>
          </tr>
          <tr class="table_tr" v-else v-for="items in form.rows" :key="items.userBh">
            <td>{{items.loginName}}</td>
            <td>{{items.userName}}</td>
            <td>{{items.userType == "1"?"系统用户":"其他用户"}}</td>
            <td>{{items.userBh}}</td>
            <td>{{items.mobile}}</td>
            <td>
              <div class="role-table-operation">
                <i class="icon iconfont icon-bianji" v-if="usersEdit" @click="toEdit(items.userBh)" title="编辑"></i>
                <i class="icon iconfont icon-shanchu" v-if="usersDelete" @click="toDelete(items.userBh, $event)" title="删除"></i>
              </div>
            </td>
          </tr>
      </table>
    </div>
    <!--table end-->
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="13"
      layout="prev, pager, next, jumper"
      :total="parseInt(total)"><!--因为这里:total期望的值是Number类型，但是vue返回的是String类型，所以要parseInt()转换类型-->
    </el-pagination>
    <!--分页 end-->
    <!--userAdd-->
    <roleAdd ref="Add" v-if="Addshow"></roleAdd>
    <!--userEdit-->
    <userEdit ref="Edit" v-if="Editshow" :persional="persionalInfo"></userEdit>
  </div>
</template>

<script>
import roleAdd from "./../components/userAdd2";
import userEdit from "./../components/userEdit";
import axios from "axios";
export default {
  name: "user",
  components: {
    roleAdd,
    userEdit
  },
  mounted: function() {
    this.$nextTick(() => {
      //防止在登陆页没有登陆时候直接手动改变url访问
      this.initPage();
      //调用全局方法 设置index高度
      this.indexHeight();
      //表格高度
      $(".role-table").height($(window).height() - 330 + "px");
      //
      this.getUsers();
      //调用全局方法根据权限值显示对应信息
      this.grantType();
    });
  },
  data() {
    return {
      currentPage: 1,
      total: "",
      show: false,
      Addshow: false,
      Editshow: false,
      empty: false,
      selectempty: false,
      usersRead: "",
      usersAdd: "",
      usersEdit: "",
      usersDelete: "",
      id: "",
      selectform: {
        //存放查询条件/参数
        loginName: "",
        userName: "",
        currentPage: 1, //默认1
        pageSize: 13, //默认1
        sortby: "", //数据列的某一列
        order: "asc" //正序：asc，倒序：desc
      },
      form: {
        //存放表单填写数据
        date1: "",
        loginName: "", //登陆名
        userName: "", //用户名
        currentPage: "", //当前页
        totalPage: "", //总页数
        pageSize: "", //每页行数
        rows: [] //分页数据
      },
      persionalInfo: {} //存放单个用户信息
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      axios
        .get(usersURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: this.selectform
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            if (d.record.rows.length > 0) {
              this.form.rows = d.record.rows;
              this.empty = false;
            } else {
              this.empty = true;
            }
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //查条件hide
    selectShow() {
      $(".role-select").removeClass("on");
    },
    //查询条件hide
    selectHide() {
      $(".role-select").addClass("on");
      (this.selectform.loginName = ""),
        (this.selectform.userName = ""),
        this.getUsers();
    },
    //新增
    toAdd() {
      this.Addshow = true;
      this.$nextTick(() => {
        let that = this;
        layer.open({
          type: 1,
          shadeClose: true,
          title: "新增用户",
          skin: "layui-layer-rim", //加上边框
          area: ["60%", "500px"], //宽高
          content: $(this.$refs.Add.$el),
          end: function() {
            that.Addshow = false;
          }
        });
      });
    },
    //编辑
    toEdit(userBh) {
      this.getPersonUserInfo(userBh, () => {
        this.Editshow = true;
        this.$nextTick(() => {
          let that = this;
          layer.open({
            type: 1,
            shadeClose: true,
            title: "编辑用户",
            skin: "layui-layer-rim", //加上边框
            area: ["60%", "500px"], //宽高
            content: $(this.$refs.Edit.$el),
            end: function() {
              that.Editshow = false;
            }
          });
        });
      });
    },
    //获取单个用户信息
    getPersonUserInfo(userBh, callback) {
      axios
        .get(usersURL + "/" + userBh, {
          headers: { Authorization: appDB.get("userInfo").token }
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.persionalInfo = d.record;
            if (callback instanceof Function) {
              callback();
            }
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(erroe => {
          layer.msg("请求单个用户接口失败");
        });
    },
    //删除用户
    toDelete(userBh, el) {
      axios
        .delete(usersURL + "/" + userBh, {
          headers: { Authorization: appDB.get("userInfo").token }
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.getUsers(); //删除成功后重新渲染列表
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(erroe => {
          layer.msg("请求删除接口失败");
        });
    },
    //获取用户列表
    getUsers() {
      axios
        .get(usersURL, {
          headers: { Authorization: appDB.get("userInfo").token },
          params: this.selectform
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.total = d.record.totalPage;
            if (d.record.rows.length > 0) {
              this.form.rows = d.record.rows;
              this.empty = false;
            } else {
              this.empty = true;
            }
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    }
    //select
    // select() {
    //   this.$nextTick(()=>{
    //     axios
    //     .get(
    //       URL + "/api/userservice/v1/users",
    //       {
    //         params: this.selectform
    //       },
    //       {
    //         headers: { Authorization: appDB.get("userInfo").token }
    //       }
    //     )
    //     .then(response => {
    //       let d = response.data;
    //       if (d.resultCode == 0) {
    //         if (d.record.rows.length > 0) {
    //           this.form.rows = d.record.rows;
    //         } else {
    //           this.selectempty = true;
    //         }
    //       } else {
    //         layer.msg(d.msg);
    //       }
    //     })
    //     .catch(error => {
    //       layer.msg("网络错误");
    //     });
    //   })
    // }//select
  }
};
</script>

<style scoped>
@import "../assets/css/elementUI.css";
.el-pagination {
  margin-top: 15px;
}
.role-head {
  width: 100%;
  float: left;
  color: #fff;
  margin: 70px 0 20px 0;
}
.role-head-title {
  float: left;
  font-size: 16px;
}
.icon-yonghu {
  font-size: 20px;
  margin-right: 8px;
}
.role-head-operation {
  /* width: 258px; */
  float: right;
}
.role-head-operation-items {
  height: 18px;
  line-height: 18px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  border-right: 1px solid #fff;
  float: left;
}
.role-head-operation-items:last-child {
  float: left;
  border-right: 0;
  font-size: 16px;
  padding-right: 0;
}
.icon-chaxun {
  display: inline-block;
  margin-right: 4px;
  float: left;
}
.icon-xinzeng {
  display: inline-block;
  margin-right: 4px;
  font-size: 18px;
  float: left;
}
.icon-jinru {
  color: #35c126;
  font-size: 26px;
  display: inline-block;
}
.role-table {
  width: 100%;
  float: left;
  background: #fff;
  overflow-y: auto;
}
#role-table {
  width: 100%;
  border: 0;
  background: #fff;
  float: left;
}
#role-table tr td {
  padding: 12px 15px;
  border: 1px solid #cbcbcb;
}
#role-table tr:hover {
  background: #f0f0f0;
}
.role-table-title {
  width: 100%;
  background: #0a456f;
  color: #fff;
}
.role-table-title td {
  padding: 12px 15px;
  border-right: 1px solid #012842;
  border-bottom: 1px solid #cbcbcb;
}
.role-table-operation {
  display: flex;
  justify-content: space-around;
}
.role-table-operation i {
  color: #5594d1;
  font-size: 18px;
  cursor: pointer;
}
.role-select {
  width: 100%;
  height: 146px;
  padding: 20px 4%;
  overflow: hidden;
  float: left;
  background: #14466a;
  margin-bottom: 20px;
  transition: all ease-in-out 0.5s;
}
.role-select.on {
  width: 100%;
  height: 0;
  padding: 0 4%;
  background: #14466a;
  margin-bottom: 0;
}
.colse {
  border-radius: 30px;
  padding: 8px 40px;
  background: none;
  border: 1px solid #367fb6;
  color: #fff;
}
.select-submit {
  border-radius: 30px;
  padding: 8px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
}
.layui-layer-title {
  color: #000;
  font-size: 16px;
}
</style>
